import styled from 'styled-components'
import loginBg from '@/assets/imgs/login_background.png'
import useConfigStore from '@/store/useConfigStore.js'
import {Input,Modal} from 'antd';
import {memo, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react'
import {useNavigate} from 'react-router-dom'

const LoginContainer = styled.div`
    width: 100%;
    height: 100vh;
    background-image: url(${loginBg});
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;

    .logo {
        height: 59px;
        width: auto;
        position: absolute;
        left: 90px;
        top: 70px;
        cursor: pointer;
    }
`

export function LoginLayout({children}) {
  const logUrl = useConfigStore((state) => state.config.logo_url)
  const navigate = useNavigate();
  return (<>
    <LoginContainer>
      <img className="logo" alt="" src={logUrl} onClick={()=>[
        navigate('/home')
      ]}/>
      {children}
    </LoginContainer>
  </>)
}

const MInputContainer = styled.div`
   .ant-input-group-addon{
       border: none !important;
       background: transparent !important;
       padding: 0 !important;
   }
    .ant-input-group{
        background: #F5F9FE;
        border-radius: 10px;
        padding: 6px 20px;
    }


    .ant-input {
        height: 44px !important;
        font-size: 14px;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding-left: 14px;
    }
    .ant-input::placeholder {
        color: #666666;
        font-size: 14px;
        font-weight: 400;
    }

    .iconfont {
        font-size: 28px;
        color: #53B332;
        position: relative;
        padding-right: 16px;
    }

    .iconfont::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 1px;
        height: 120%;
        top: 50%;
        background: #53B332;
        transform: translateY(-50%);
    }
`

const ModalContainer = styled.div`
    color: red;
    .ant-modal-body{

    }
`

function PrefixIcon({iconFontClass}) {
  return (<>  <i className={`iconfont ${iconFontClass}`}></i></>)

}

export function MInput({iconFontClass, suffix, placeholder, type = 'text', value, onChange, onBlur,maxLength}) {
  return <MInputContainer>
    <Input addonBefore={iconFontClass&& <PrefixIcon iconFontClass={iconFontClass}/>} addonAfter={suffix} placeholder={placeholder} type={type}
           onChange={onChange} onBlur={onBlur} value={value} maxLength={maxLength}  />
  </MInputContainer>
}


export function MModal  ({ isModalOpen, handleCancel, title, tips, isInternal = false, btnText })  {
  const [intervalTime, setIntervalTime] = useState(3); // 初始倒计时为 3 秒
  const timer = useRef(null); // 用来存储定时器的引用
  // 当 isModalOpen 变化时启动计时器
  useEffect(() => {
    if (isInternal) {
      let count = intervalTime;
      // 只有在模态框打开时启动计时器
      timer.current = setInterval(() => {
        if(count === 0){
          clearInterval(timer.current);
          handleCancel();
          return
        }
        count --
        setIntervalTime(count)
      }, 1000);
    }

    // 清理定时器：当模态框关闭或组件卸载时清除定时器
    return () => clearInterval(timer.current);
  }, [])// 依赖 isModalOpen，当其变化时重新启动定时器

  const subText = isInternal ? `${btnText}（${intervalTime}s）` : btnText;

  return (
        <Modal centered={true} width={816} open={isModalOpen} onCancel={handleCancel} closable={false} footer={null} wrapClassName="mmodal">
          <div className="iconfont icon-tick"></div>
          <div className="title">{title}</div>
          <div className="tips">{tips}</div>
          <div className="btn" onClick={handleCancel}>{subText}</div>
        </Modal>
  );
}